<div class="body">
	<div class="body_resize">
      <div class="left" align="left">
      	<h1>Agregar cliente</h1>

<% form_for(@cliente) do |f| %>
  <%= f.error_messages %>

  <p>
    <%= f.label :nombre %><br />
    <%= f.text_field :nombre %>
  </p>
  <p>
    <%= f.label :apellido %><br />
    <%= f.text_field :apellido %>
  </p>
  <p>
    <%= f.label :correo %><br />
    <%= f.text_field :correo %>
  </p>
  <p>
    <%= f.label(:fecha_nac,"Fecha de Nacimiento") %><br />
      <%= f.date_select :fecha_nac, :discard_day => false, :start_year => 1930, :end_year => 2037 %>
  </p>
  <p>

  </p>
    <% f.fields_for :direccions do |d| %>

    <p>
      <%= d.label(:nombre,"Nombre de la Dirección") %><br />
      <%= d.text_field(:nombre, :maxlength => 20) %><br />
      <!--%= image_tag "tarjetas.jpg" %-->
    </p>
     <p>
      <%= d.label(:residencia_calle,"Calle") %><br />
      <%= d.text_field(:residencia_calle, :maxlength => 20) %><br />
      <!--%= image_tag "tarjetas.jpg" %-->
    </p>
    <p>
      <%= d.label(:apartamento_num_casa,"Apartamento/Casa Numero") %><br />
      <%= d.text_field(:apartamento_num_casa, :maxlength => 4) %>
    </p>
    <p>
      <%= d.label(:urbanizacion,"Urbanización") %><br />
      <%= d.text_field(:urbanizacion, :maxlength => 20) %>
    </p>
    <p>
      <%= d.label(:ciudad,"Ciudad") %><br />
      <%= d.text_field(:ciudad, :maxlength => 20) %>
    </p>
    <p>
      <%= d.label(:pais,"País") %><br />
      <%= d.text_field(:pais, :maxlength => 20) %>
    </p>
    <p>
      <%= d.label(:codigo_postal,"Código Postal") %><br />
      <%= d.text_field(:codigo_postal, :maxlength => 5) %>
    </p>
    <p>
      <%= d.hidden_field :latitud %>
      <%= d.hidden_field :longitud %>
    </p>
    <%end%>
 
  <% f.fields_for :tarjetas do |t| %>
    <p>
      <%= t.label(:nombre_dueno,"Nombre del Tarjeta Habiente") %><br />
      <%= t.text_field(:nombre_dueno, :maxlength => 16) %><br />
      <!--%= image_tag "tarjetas.jpg" %-->
    </p>
    <p>
      <%= t.label(:numero,"Numero de tarjeta") %><br />
      <%= t.text_field(:numero, :maxlength => 18) %><br />
      <!--%= image_tag "tarjetas.jpg" %-->
    </p>
    <p>
      <%= t.label(:fecha_vencimiento,"Fecha de Vencimiento") %><br />
      <%= t.date_select :fecha_vencimiento, :discard_day => true, :start_year => Date.current.year, :end_year => 2037 %>
    </p>
    <p>
      <%= t.label(:codigo_seguridad,"Código de seguridad") %><br />
      <%= t.password_field(:codigo_seguridad, :maxlength => 3) %>
    </p>
    <p>		
	<%= t.label(:tipo,"Tipo de Tarjeta") %><br />
	<select name="Tipo de Tarjeta" class="comboBox">
      	<option value=1>Visa</option>
      	<option value=2>MasterCard</option>
	</select>
	</p>
	<br></br>
  <%end%>
 <h2>Marque la dirección en el mapa</h2>
<br></br>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
  var centrodelmapa = new google.maps.LatLng(10.496420232955682, -66.906738281258);
  var parliament = new google.maps.LatLng(10.496420232955682, -66.906738281258);
  var marker;
  var map;
 
  function initialize() {
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: centrodelmapa
    };
 
    map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
          
    marker = new google.maps.Marker({
      map:map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      position: parliament
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
    google.maps.event.addListener(marker, 'dragend', coordinates);
  }
 
  function toggleBounce() {
 
    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
  function coordinates() {
      var point = new google.maps.LatLng(marker.getPosition().lat(),marker.getPosition().lng(),true);
      map.panTo(point);
      document.getElementById("cliente_direccions_attributes_0_latitud").value = point.lat();
      document.getElementById("cliente_direccions_attributes_0_longitud").value = point.lng();
    }
</script>

<body onload="initialize()">
<center>
<div id="map" style="width: 610px; height: 480px"></div>
<div id="message"></div>
<br></br>
</center>
      <%= f.submit 'Registrar' %>
      <%= link_to 'Back', clientes_path %>
<% end %>

     </div>
      <div class="right">
      	<img src="/images/carretillaCajita.jpg" alt="" width="270" height="270" />
      </div>
      <div class="clr"></div>
    </div>
  </div>